import {Directive, ElementRef, HostListener, Input} from '@angular/core';
import $ from 'jquery';

/**
 * Generated class for the GroupShowOrHideDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
    selector: '[groupShowOrHide]' // Attribute selector
})
export class GroupShowOrHideDirective {
    @Input('groupShowOrHide') groupEl: HTMLElement;

    constructor(private el: ElementRef) {
    }

    @HostListener('click') onclick() {
        if (this.el.nativeElement.src.search(/up/i) >= 0) {
            this.el.nativeElement.src = './assets/images/policy/arrow-d.png';

            if (this.groupEl) {
                this.groupEl.style.display = 'none';

            } else {
                this.el.nativeElement.parentElement.nextElementSibling.childNodes[0].parentElement.style.display = 'none';

            }
        } else {

            this.el.nativeElement.src = './assets/images/policy/arrow-up.png';
            if (this.groupEl) {
                this.groupEl.style.display = 'block';
            } else {
                this.el.nativeElement.parentElement.nextElementSibling.childNodes[0].parentElement.style.display = 'block'
            }


        }

        // $(this.el.nativeElement).css('transition', '0.3s transform');
        //
        // if ($(this.el.nativeElement).css('transform') == 'none') {
        //     if (this.el.nativeElement.src.search(/up/i) >= 0) {
        //         $(this.el.nativeElement).css('transform', 'rotate(-180deg)');
        //     } else {
        //         $(this.el.nativeElement).css('transform', 'rotate(180deg)');
        //     }
        // }
        // else {
        //     $(this.el.nativeElement).css('transform', 'none');
        // }
        //
        //
        // // this.el.nativeElement.src = './assets/images/policy/arrow-up.png';
        // if (this.groupEl) {
        //     // this.groupEl.style.display = 'block';
        //     $(this.groupEl).slideToggle(300, 'swing')
        // } else {
        //     // this.el.nativeElement.parentElement.nextElementSibling.childNodes[0].parentElement.style.display = 'block'
        //     $(this.el.nativeElement.parentElement.nextElementSibling.childNodes[0].parentElement).slideToggle(300, 'swing')
        // }
    }

}
